<include file="Common:layout" />
<body style="background-color: rgb(255, 255, 255); overflow: auto; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>商品设置</h3>
                <h5>商品基本信息设置</h5>
            </div>
            <ul class="tab-base nc-row">
                <li><a href="javascript:void(0);" data-index='1' class="tab current"><span>通用信息</span></a></li>
                <li><a href="javascript:void(0);" data-index='2' class="tab"><span>商品相册</span></a></li>
                <li><a href="javascript:void(0);" data-index='3' class="tab"><span>商品规格</span></a></li>
                <!--<li><a href="javascript:void(0);" data-index='4' class="tab"><span>商品物流</span></a></li>-->
                <!--<li><a href="javascript:void(0);" data-index='5' class="tab"><span>积分折扣</span></a></li>-->
            </ul>
        </div>
    </div>

    <!--表单数据-->
    <form method="post" id="addGoodsForm" action="{:U('Good/addGood')}">
        <!--通用信息-->
        <div class="ncap-form-default tab_div_1">
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品分类</label>
                </dt>
                <dd class="opt">
                    <select name="cat_id" id="cat_id"  class="small form-control">
                        <option value="0">选择分类</option>
                        <volist name="categories" id="category">
                            <option value="{$category['id']}">{$category['c_name']}</option>
                        </volist>
                    </select>
                    <select name="cat_id_2" id="cat_id_2" class="small form-control">
                        <option value="0">选择分类</option>
                    </select>
                    <select name="cat_id_3" id="cat_id_3" class="small form-control">
                        <option value="0">选择分类</option>
                    </select>
                    <span class="err" id="err_cat_id" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品品牌</label>
                </dt>
                <dd class="opt">
                    <select name="brand_id" id="brand_id"  class="small form-control">
                        <option value="0">所有品牌</option>
                        <volist name="brands" id="brand">
                            <option value="{$brand['id']}">{$brand['b_name']}</option>
                        </volist>
                    </select>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="" name="g_name" class="input-txt" id="g_name"/>
                    <span class="err" id="err_goods_name" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="store_name">商品简介</label>
                </dt>
                <dd class="opt">
                    <textarea rows="3" cols="80" name="brief" class="input-txt" id="brief"></textarea>
                    <span id="err_brief" class="err" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品货号</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="" name="good_sn" class="input-txt" id="good_sn"/>
                    <span class="err" id="err_good_sn" style="color:#F00; display:none;"></span>
                    <p class="notic">如果不填会自动生成</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">本店售价</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="" name="price" class="price" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_price" style="color:#F00; display:none;"></span>
                </dd>
            </dl>

            <dl class="row">
                <dt class="tit">
                    <label for="record_no">市场价</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="0" name="market_price" class="market_price" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_market_price" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">销量</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="1" class="sale_num" name="sale_num" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_sale_num" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">佣金</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="0" name="commission" class="commission" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_commission" style="color:#F00; display:none;"></span>
                    <p class="notic">用于分销的分成金额</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>主图</label>
                </dt>
                <dd class="opt">
                    <div class="input-file-show">
                        <span class="show">
                            <a id="img_a" target="_blank" class="nyroModal" rel="gal" href="">
                                <i id="img_i" class="fa fa-picture-o" onMouseOver="layer.tips('<img src=>',this,{tips: [1, '#fff']});" onMouseOut="layer.closeAll();"></i>
                            </a>
                        </span>
                        <span class="type-file-box">
                            <input type="text" id="imagetext" name="original_img" value="" class="type-file-text">
                            <input type="hidden" name="thumb" id="thumb" value="">
                            <input type="button" name="button" id="button1" value="选择上传..." class="type-file-button">
                            <input class="type-file-file" onClick="GetUploadify(1,'','good','img_call_back')" size="30" hidefocus="true" nc_type="change_site_logo" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">
                        </span>
                    </div>
                    <span class="err"></span>
                    <p class="notic">请上传图片格式（JPG / PNG / JPEG）文件，建议尺寸(200x200)</p>
                </dd>
            </dl>

            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品重量</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="" name="weight" class="weight" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_weight" style="color:#F00; display:none;"></span>
                    <p class="notic">务必设置商品重量, 用于计算物流费.以克（kg）为单位（1kg = 1000g）</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">库存</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="1" class="stock" name="stock" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_stock" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">装箱件数</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="1" class="per_num" name="per_num" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')" />
                    <span class="err" id="err_per_num" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="record_no">商品详情描述</label>
                </dt>
                <dd class="opt">
                    <textarea class="span12 ckeditor" id="goods_content" name="info" title=""></textarea>
                    <span class="err" id="err_info" style="color:#F00; display:none;"></span>
                </dd>
            </dl>
        </div>
        <!--通用信息-->
        <!-- 商品相册-->
        <div class="ncap-form-default tab_div_2" style="display:none;">
            <dl class="row">
                <div class="tab-pane" id="tab_goods_images">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td>
                                <div class="goods_xc" style="width:100px; text-align:center; margin: 5px; display:inline-block;">
                                    <input type="hidden" name="goods_images[]" value="" class="goods_imgs"/>
                                    <a href="javascript:void(0);" onClick="GetUploadify(5,'','goods','call_back2');">
                                        <img src="__PUBLIC__/images/img_upload.png" width="100" height="100" />
                                    </a>
                                    <br/>
                                    <a href="javascript:void(0)">&nbsp;&nbsp;</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </dl>
        </div>
        <!-- 商品相册-->
        <!-- 商品规格-->
        <div class="ncap-form-default tab_div_3" style="display:none;">
            <dl class="row">
                <dt class="tit">
                    <label>商品规格&nbsp; <a class="plus_spec" href="javascript:;"><strong>[+]</strong></a></label>
                </dt>
                <dd class="opt">
                    <div class="spec_box">
                        <div style="margin-bottom:10px;" class="spec_k1">
                            <select name="spe_1" class="small form-control spec1 spec_select">
                                <option value="0" id="default">- 选择规格属性 -</option>
                                <volist name="spec" id="vo">
                                    <option value="{$vo['id']}">{$vo['s_name']}</option>
                                </volist>
                            </select>
                            <a class="p_plus" href="javascript:;" for="1"><strong>[+]</strong></a>
                        </div>
                        <div class="alisth1" style="margin-bottom:10px;"></div>
                    </div>
                </dd>
            </dl>
        </div>
        <!-- 商品规格-->

        <div class="ncap-form-default">
            <div class="bot">
                <a href="JavaScript:void(0);" class="ncap-btn-big ncap-btn-green" id="submit_btn">确认提交</a>
            </div>
        </div>
    </form>
    <!--表单数据-->
</div>
<div id="goTop"> <a href="JavaScript:void(0);" id="btntop"><i class="fa fa-angle-up"></i></a><a href="JavaScript:void(0);" id="btnbottom"><i class="fa fa-angle-down"></i></a></div>
<script>
    //选择分类
    $(function(){

        //添加商品规格的值的时候,动态添加input框
        $('body').on('click','.p_plus', function() {
            var l = $(this).attr("for");
            var my_parent = $(this).parent().parent().parent();
            var select_val = my_parent.find('.spec' + l).val();
            if (select_val != 0) {
                var str = '<a>' +
                        '<input type="text" name="spec_' + l + '[]" style="width:80px;" placeholder="规格值">&nbsp;' +
                        '<strong onclick="$(this).parent().remove();" style="margin-right:10px;">[-]</strong>' +
                        '</a>';
                my_parent.find(".spec_box").find('.alisth' + l).append(str);
            }else{
                layer.alert('请先选择规格属性!', {icon: 2,time:1000});
            }
        });

        //商品规格
        $('.plus_spec').click(function() {
            var spec_i = $('.spec_select').length;
            spec_i += 1;
            $('.p_plus').show();
            var html_str = '<div class="spec_box">' +
                    '<div class="spec_k'+ spec_i +'" style="margin-bottom:10px;">' +
                    '<select name="spe_'+ spec_i +'" class="small form-control spec'+ spec_i +' spec_select">' +
                    '<option value="0" id="default">- 选择规格属性 -</option>' +
                    '<volist name="spec" id="vo">' +
                    '<option value="{$vo[id]}">{$vo[s_name]}</option>' +
                    '</volist>' +
                    '</select>' +
                    '<a class="p_plus" href="javascript:;" for="'+ spec_i +'"><strong>[+]</strong></a>' +
                    '&nbsp;<strong onclick="$(this).parent().parent().remove()">[-]</strong>' +
                    '</div>' +
                    '<div class="alisth'+ spec_i +'" style="margin-bottom:10px;"></div>' +
                    '</div>';
            $(this).parent().parent().next('.opt').append(html_str);
        });

        // 添加商品js验证
        $("#submit_btn").click(function()
        {
            // 规格类的个数
            var cate = $("#cat_id").val();          // 分类
            var brand = $("#brand_id").val();       // 品牌
            var img = $('#imagetext').val();        // 主图
            var per_num = $(".per_num").val();      // 装箱件数
            var sale_num = $(".sale_num").val();    // 销量
            var stock = $(".stock").val();          // 库存
            var weight = $('.weight').val();        // 重量
            var price = $('.price').val();          // 售价
            var g_name = $('#g_name').val();        // 名称
            var brief = $('#brief').val();          // 简介
            var market_price = $('.market_price').val(); // 市场价
            var goods_imgs = $('.goods_imgs').val(); // 相册

            if (cate == 0) {
                layer.alert('请选择商品分类!');return false;
            }
            if (brand == 0) {
                layer.alert('请选择商品品牌!');return false;
            }
            if (g_name == '') {
                layer.alert('请填写商品名称!'); return false;
            }
            if (brief == '') {
                layer.alert('请填写商品简介!');return false;
            }
            if (img == '') {
                layer.alert('请上传商品图片!', {icon: 8,time:1000});return false;
            }
            if (price == '') {
                layer.alert('请正确填写商品价格!');return false;
            }
            if (weight == '') {
                layer.alert('请正确填写商品重量!');return false;
            }
            if (stock == '') {
                layer.alert('请正确填写商品库存!');return false;
            }
            if (per_num == '') {
                layer.alert('请正确填写装箱件数!');return false;
            }
            if(!goods_imgs) {
                layer.alert('请上传商品图册!');return false;
            }
            $("#addGoodsForm").submit();
        });
        $('#cat_id').change(function(){
            admin_category($(this).val(),'cat_id_2');
            $('#cat_id_3').empty().html("<option value='0'>选择分类</option>");
        })

        $('#cat_id_2').change(function(){
            $id = $(this).val();
            if($id == 0){
                $('#cat_id_3').empty().html("<option value='0'>选择分类</option>");
                return false;
            }
            admin_category($id,'cat_id_3');
        })

        // tab切换列表
        $('.tab-base').find('.tab').click(function(){
            $('.tab-base').find('.tab').each(function(){
                $(this).removeClass('current');
            });
            $(this).addClass('current');
            var tab_index = $(this).data('index');
            $(".tab_div_1, .tab_div_2, .tab_div_3").hide();
            $(".tab_div_"+tab_index).show();
        });
    })

    /**
     * 获取多级联动的商品分类
     */
    function admin_category(id,next)
    {
        $.ajax({
            type : "GET",
            url  : "{:U('Category/get_category')}",
            data : {pid :id},
            success: function(v) {
                v = "<option value='0'>选择分类</option>" + v;
                $('#'+next).empty().html(v);
            }
        });
    }

    var ue = UE.getEditor('goods_content',{
        initialFrameWidth: "100%", //初化宽度
        initialFrameHeight:300,
        autoHeightEnabled: true
    });

    /*
     * 以下是图片上传方法
     */
    // 上传商品图片成功回调函数
    function call_back(fileurl_tmp){
        $("#original_img").val(fileurl_tmp);
        $("#original_img2").attr('href', fileurl_tmp);
    }

    // 上传商品相册回调函数
    function call_back2(paths){

        var last_div = $(".goods_xc:last").prop("outerHTML");
        for (var i = 0;i<paths.length ;i++ )
        {
            $(".goods_xc:eq(0)").before(last_div);	// 插入一个 新图片
            $(".goods_xc:eq(0)").find('a:eq(0)').attr('href',paths[i]).attr('onclick','').attr('target', "_blank");// 修改他的链接地址
            $(".goods_xc:eq(0)").find('img').attr('src',paths[i]);// 修改他的图片路径
            $(".goods_xc:eq(0)").find('a:eq(1)').attr('onclick',"ClearPicArr2(this,'"+paths[i]+"')").text('删除');
            $(".goods_xc:eq(0)").find('input').val(paths[i]); // 设置隐藏域 要提交的值
        }
    }

    /*
     * 上传之后删除组图input
     * @access   public
     * @val      string  删除的图片input
     */
    function ClearPicArr2(obj,path)
    {
        $.ajax({
            type:'GET',
            url:"{:U('Uploadify/delupload')}",
            data:{action:"del", filename:path},
            success:function(){
                $(obj).parent().remove(); // 删除完服务器的, 再删除 html上的图片
            }
        });
    }

    function img_call_back(fileurl_tmp)
    {
        //拼接商品图片缩略图
        var arr = fileurl_tmp.split('/');
        var url = arr[arr.length - 1];
        var dir = arr[arr.length - 2];
        var end = './Uploads/good/'+dir+'/small_'+url;
        $('#thumb').val(end);

        $("#imagetext").val(fileurl_tmp);
        $("#img_a").attr('href', fileurl_tmp);
        $("#img_i").attr('onmouseover', "layer.tips('<img src="+fileurl_tmp+">',this,{tips: [1, '#fff']});");
    }
</script>
</body>
</html>